<template>
  <div class="container">
    <div class="chart">
      <div id="baojing-chart" style="width: 100%"></div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 80%; height: 98%"
        fit
        height="750"
      >
        <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
        <el-table-column prop="t001" label="项目"></el-table-column>
        <el-table-column prop="t002" label="报警次数"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
export default {
  created() {
    setTimeout(() => {
      Highcharts.chart("baojing-chart", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
          backgroundColor: "#0000",
        },
        title: {
          text: "",
          style: {
            color: "#2099D3",
          },
        },
        tooltip: {
          pointFormat: "占比: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              style: {
                color: "#000",
              },
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [
             ...this.getPieData()
            ],
          },
        ],
      });
    }, 0);
  },
  data() {
    return {
      tableData: [
        {
          Id: 1,
          t001: "主起重量",
          t002: 10,
        },
        {
          Id: 2,
          t001: "副起重量",
          t002: 5,
        },
        {
          Id: 3,
          t001: "主起电机1超速",
          t002: 2,
        },
        {
          Id: 4,
          t001: "主起电机2超速",
          t002: 2,
        },
        {
          Id: 5,
          t001: "副起电机超速",
          t002: 2,
        },
        {
          Id: 6,
          t001: "主起上极限",
          t002: 1,
        },
        {
          Id: 7,
          t001: "主起下极限",
          t002: 1,
        },
        {
          Id: 8,
          t001: "副起上极限",
          t002: 1,
        },
        {
          Id: 9,
          t001: "副起下极限",
          t002: 1,
        },
        {
          Id: 10,
          t001: "主小车后限位",
          t002: 1,
        },
        {
          Id: 11,
          t001: "主小车前限位",
          t002: 1,
        },
        {
          Id: 12,
          t001: "副小车后限位",
          t002: 1,
        },
        {
          Id: 13,
          t001: "副小车前限位",
          t002: 1,
        },
        {
          Id: 14,
          t001: "大车左限位",
          t002: 1,
        },
        {
          Id: 15,
          t001: "大车右限位",
          t002: 1,
        },
      ],
    };
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    getPieData() {
      const data = [];
      for (const item of this.tableData) {
        data.push({
          name: `<b style='color:grey'>${item.t001}</b>`,
          y: item.t002,
        });
      }
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .chart {
    margin-bottom: 20px;
  }
  .table {
    margin-left: 150px;
  }
}
</style>